import {useState,useEffect} from 'react'
import { getPing } from '../../../api/AddMs'
import { useSelector } from 'react-redux'
import { RootReducer } from '../../../types/store'
import { List,Image,Avatar,Rate,ErrorBlock} from 'antd-mobile'
import { MyHead } from '../../../components/head'
import { useTiaoZhuan } from '../../../hooks/routers'
import dayjs from 'dayjs'
import { base } from '../../../util'
const styles = {
    center:{
        display:"flex",
        alignItems:'center',
        color:"#999"
    },
    flex:{
        display:"flex",
        alignItems:'center',
        justifyContent:'space-between',
        width:'100%',
        fontSize:16
    }
}
const data = ()=>{
    const [data,setData] = useState<pingsType[]>([])
    const {Tz} = useTiaoZhuan()
    const userData = useSelector<RootReducer,foundUserType|null>(s=>s.MyData.userData)
    const getData = async()=>{
        let res = await getPing(userData!.phone)
        if(res.code ==200){
            setData(res.result)
        }
        
    }
    useEffect(()=>{
        getData()
    },[])
    return (
        <div style={{height:'100%',boxSizing:"border-box"}}>
            <MyHead title='我的评论'></MyHead>
            {
                    data.length > 0 ? <div className="clist" style={{paddingTop:'60px',overflow:'auto'}}>

                    <List header='面试评论'>
                        {data.map(val => (
                            <List.Item
                                onClick={()=>Tz('/detail/'+val.mid+"?canpany="+val.msobj.campany)}
                                key={val._id}
                                extra={dayjs(val.time).format('MM-DD HH:mm')}
                                prefix={
                                    val.userInfo.avatar?
                                    <Image
                                        src={val.userInfo.avatar?.replace(/public/,base)}
                                        style={{ borderRadius: 20 }}
                                        fit='cover'
                                        width={40}
                                        height={40}
                                    />
                                    :
                                    <Avatar src='' style={{borderRadius:'50%','--size':'40px'}} />
                                }
                                description={
                                    <div style={{...styles.center,flexDirection:'column',justifyContent:'flex-start',alignItems:"flex-start"}}>
                                        <div style={{marginTop:5}}>
                                            {val.msobj.campany}
                                        </div>
                                        <div style={{marginTop:5}}>
                                            {val.comment}
                                        </div>
                                        <div style={{marginTop:5}}>
                                            <Rate style={{'--star-size':'16px'}} defaultValue={val.rate} ></Rate>
                                        </div>
                                    </div>
                                }
                            >
                                <span style={{fontSize:12}}>
                                    {val.userInfo.username}
                                </span>
                            </List.Item>
                        ))}
                    </List>
                </div>
                :
                <div className="empty" style={{paddingTop:'60px'}}>
                <ErrorBlock status='empty' 
                    title="暂无评论数据"
                />
            </div>
                }
        </div>
    )
}
export default data